<!--
 * @Author: fisher
 * @Date: 2021-11-19 09:49:15
 * @LastEditTime: 2021-11-19 11:58:14
 * @LastEditors: fisher
 * @Description: 
 * @FilePath: \daidaidaidai\demo2.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body,
      #mian {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: rgba(3, 6, 6, 0.7);
      }
    </style>
  </head>
  <body>
    <div id="mian"></div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
  <script>
    var chartDom = document.getElementById("mian");
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // Use axis to trigger tooltip
          type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
        },
      },
      legend: {},
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        show: false,
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        type: "category",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: [
          "结算送审",
          "竣工验收",
          "施工",
          "合同签订",
          "招标工作",
          "报批报建",
          "前期设计",
        ],
      },
      series: [
        {
          name: "待开展",
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: [0, 0, 0, 0, 0, 0, 0],
        },
        {
          name: "进行中",
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: [30, 40, 60, 0, 0, 0, 0],
        },
        {
          name: "已完成",
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: [0, 0, 120, 120, 160, 230, 210],
        },
        {
          name: "延期",
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: [20, 30, 100, 100, 100, 100, 100],
        },
      ],
    };

    option && myChart.setOption(option);
  </script>
</html>
